<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getDutyListRequestApi } from '@/api/duty'
import { ElMessage } from 'element-plus'
import Page from '@/components/page/Page.vue'
const username = ref('')
const id = ref(0)
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const updataDialog = ref(false)
const addDialog = ref(false)
const deleletDialog = ref(false)
const addFormRef = ref()
const updataFormRef = ref()

// 方法区
const pageChange = (size, num) => {
    console.log(size, num)
    pageSize.value = size
    pageNum.value = num
    gettableData()
}
//查询值班表列表
const gettableData = async () => {
    const res = await getDutyListRequestApi({ pageNum: pageNum.value, pageSize: pageSize.value, username: username.value })
    tableData.value = res.data.rows
    total.value = res.data.total
    console.log(res.data.total)
}





//删除用户请求
const deleletUserRequest = async () => {
    const res = await deleteUserRequestApi(id.value)
    res.code == '1' ? ElMessage.success('删除成功') : ElMessage.error('删除失败')
    gettableData()
    deleletDialog.value = false

}



onMounted(async () => {
    gettableData()
})

</script>

<template>
    <div style="padding: 20px;background-color: aliceblue; width: 95%;margin: 0 auto;">
        <div>
            姓名：<el-input v-model="username" style="width: 200px;margin-right: 30px;" placeholder="请输入姓名" /><el-button
                type="primary" @click="gettableData">查询</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;height: 550px;margin-top: 40px;margin-bottom: 40px;">
            <el-table-column prop="username" label="值班人" width="180" />
            <el-table-column prop="startTime" label="值班开始时间" width="180" />
            <el-table-column prop="endTime" label="值班结束时间" width="180" />
            <el-table-column prop="dutyDays" label="值班天数" width="180" />
            <el-table-column prop="createTime" label="创建时间" width="180">
                <template #default="scope">
                    {{ scope.row.createTime.replace('T', ' ') }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="openDeleteDialog(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Page @change="pageChange" :pageNum="pageNum" :pageSize="pageSize" :total="total" v-if="total > 10" />
    </div>

    <!-- 删除对话框 -->
    <el-dialog v-model="deleletDialog" title="删除用户信息" width="500">
        <template #footer>
            <el-button @click="deleletDialog = false">取消</el-button>
            <el-button type="primary" @click="deleletUserRequest()">
                确定
            </el-button>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped></style>